[react] antd table 컴포넌트 정보 및 예제

Last Modified : 2020-09-10 / Created : 2020-09-10

11,693
View Count

주소 복사하기

React UI 라이브러리 antd의 Table 컴포넌트에 대하여 알아봅니다. antd의 Table 컴포넌트는 테이블 형태의 Layout을 구현하는데 사용됩니다.

<Table />

그럼 간단한 사용 방법 및 예제를 먼저 알아봅니다.

# antd Table 컴포넌트 정보 및 예제

antd의 Table 컴포넌트를 사용하려면 기본적으로 아래의 props를 반드시 필요로 합니다.
dataSource // 테이블에 출력할 리스트 정보
columns // 테이블의 컬럼 정보를 표시합니다.
rowKey // [String | Function] unique Key 값을 설정합니다.예를들어 아래는 간단한 예제 코드입니다. 먼저 dataSource에 필요한 정보로 siteList 배열값을 생성합니다.

const siteList = [
{
_id: { $oid: 'a1' },
title: 'webisfree'
},
{
_id: { $oid: 'a2' },
title: '웹이즈프리'
},
...
];

다음으로 컬럼 정보를 입력합니다.

const columns: any = [
{
title: 'ID',
width: 100,
render: text => {
return text.hasOwnProperty('_id') ? (
<a href={`/link/${text._id['$oid']}`}>{ text._id['$oid'] }</a>
): '';
}
},
{
title: 'Title',
dataIndex: 'title',
align: 'left'
}
];

이제 위 코드를 아래와 같이 템플릿 파일에 작성합니다.

<Table
rowKey={ item => { return item._id.$oid } }
dataSource={siteList}
columns={columns} />

위에서 rowKey prop은 unique한 key 값입니다. 문자열이나 함수를 사용할 수 있습니다. 위와 같이 사용한 이유는 맨 아래에서 확인할 수 있습니다.

! antd Table 컴포넌트의 Column 컬럼 사용하는 방법

컬럼을 사용하기 위해서 여러가지 값을 적용할 수 있습니다. 아래를 먼저 봐주세요.

title // 컬럼의 타이틀 로 출력될 내용
dataIndex // 컬럼의 value에 해당하는 값
width // 컬럼의 너비 width 값
key // Key 값을 설정하는데 필요
align // 정렬 기준의 값 'left | center | right'
render // 렌더링이 필요한 경우의 렌더링 함수

여기까지 컬럼 설정에 필요한 설정값을 알아보았습니다.

! MongoDB를 사용하는 경우 unique key 적용하기
만약 MongoDB를 사용하는 경우라면 Table에 아래와 같이 입력하여 unique key 에러를 피할 수 있습니다.

<Table
rowKey={ item => { return item._id.$oid } }
/>

여기까지 antd 라이브러리 Table 컴포넌트에 대하여 알아보았습니다.

아래의 글도 찾고 계시지 않나요?

react onClick 파라미터 값 전달하는 방법

React에서 string, 텍스트, 문자열로 html 코드를 추가하는 방법

[react] antd table 컴포넌트 정보 및 예제

# antd Table 컴포넌트 정보 및 예제

! antd Table 컴포넌트의 Column 컬럼 사용하는 방법

! MongoDB를 사용하는 경우 unique key 적용하기만약 MongoDB를 사용하는 경우라면 Table에 아래와 같이 입력하여 unique key 에러를 피할 수 있습니다.

! MongoDB를 사용하는 경우 unique key 적용하기
만약 MongoDB를 사용하는 경우라면 Table에 아래와 같이 입력하여 unique key 에러를 피할 수 있습니다.